<template>
	<view class="swiper">
		<view class="content" :style="{'left': 'calc(-'+(current-1)*22+'% + 11% '+'- '+(current-2)*20+'rpx - 10rpx)'}">
			<view class="swiper-item" v-for="(item, index) in lists" :key="index"
				:class="current==index?'active-item':''" @click="itemFn(item.id, 0)">
				<image :src="item.img"></image>
				<view class="text">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				current: 2,
				timer: null
			}
		},
		computed: {
			lists() {
				return this.data
			}
		},
		created() {
			this.timerFn()
		},
		methods: {
			timerFn() {
				clearInterval(this.timer)
				this.timer = setInterval(() => {
					if (this.current > this.lists.length - 4) {
						this.current = 2
					} else {
						this.current += 1
					}
					this.fistList()
				}, 10000)
			},
			fistList() {
				let val = this.lists.shift()
				this.lists.push(val)
			},
			itemFn(vid, mid) {
				var fxpid = 1
				if (uni.getStorageSync("userinfo")) {
					fxpid = uni.getStorageSync("userinfo").id
				}
				uni.navigateTo({
					url: '/pages/client/tuan/detail?vid=' + vid + '&mid=' + mid + '&fxpid=' + fxpid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: 100%;
		white-space: nowrap;
		position: relative;
		height: calc(24VW / 0.64);

		.content {
			position: absolute;
			transition: left 0.5s;
			width: 100%;
		}

		.swiper-item {
			text-align: center;
			width: 22%;
			height: calc(22vw / 0.69);
			display: inline-block;
			margin: 0 10rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
			.text {
				position: absolute;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				bottom: 0;
				width: 100%;
				background: rgba(0, 0,0 ,0.59);
				border-radius: 0 0 20rpx 20rpx;
			}
		}

		.active-item {
			width: calc(34% - 80rpx);
			height: calc(34VW / 0.69 - 93rpx);
		}
	}
</style>